<template>
  <d2-container>
    <template slot="header">
      <el-select v-model="type" placeholder="请选择素材的类型" style="width:160px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          >
        </el-option>
      </el-select>
      <el-input v-model="inputVal" placeholder="请输入名称或素材ID" style="width:350px;margin:0 10px" clearable></el-input>
      <el-button type="primary" icon="el-icon-search" @click="getList(1)" :disabled="isRepeat">查询</el-button>
    </template>
    <el-table
      :data="tableData"
      stripe
      fit
      v-loading="isRepeat"
      class="table-container">
      <el-table-column
        v-for="(item,index) in tabList"
        :key="index"
        :prop="item.id"
        :label="item.label"
        :width="item.width"
        show-overflow-tooltip
        >
        <template slot-scope="scope">
          <img :src="herfUrl+scope.row[item.id]" alt="标题" class="table-img" v-if="item.id==='url'&&scope.row[item.id]">
          <span v-else-if="item.id==='updateTime'">{{format(scope.row[item.id]*1000)}}</span>
          <span v-else>{{scope.row[item.id]||'--'}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :page-size="20"
      :current-page="page.pageCurrent"
      :total="page.pageTotal">
    </el-pagination>
  </d2-container>
</template>

<script>
import { getSourceList } from '@api/sourceManage'
import util from '@/libs/util.js'
export default {
  name: 'sourceManage',
  components: {},
  data () {
    return {
      herfUrl: 'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=',
      storageData: {},
      isRepeat: false,
      inputVal: '',
      type: 'image',
      options: [{
        value: 'image',
        label: '图片',
        width: '150'
      }, {
        value: 'video',
        label: '视频'
      }, {
        value: 'voice',
        label: '语音'
      }, {
        value: 'news',
        label: '图文'
      }],
      tabList: [{
        label: '标题图',
        id: 'url',
        width: '120'
      }, {
        label: '名称',
        id: 'name',
        width: ''
      }, {
        label: '素材ID',
        id: 'mediaId',
        width: ''
      }, {
        label: '创建时间',
        id: 'updateTime',
        width: ''
      }],
      tableData: [],
      loading: false,
      page: {
        pageCurrent: 1,
        pageSize: 20,
        pageTotal: 0
      },
      token: ''
    }
  },
  created () {
    this.getList(1)
  },
  methods: {
    format (val) {
      return util.tool.formatTime(val)
    },
    filterList (page) {
      this.page.pageCurrent = page
      let list = this.storageData[this.type].filter(v => JSON.stringify(v).includes(this.inputVal))
      this.page.pageTotal = list.length
      this.tableData = list.slice((page - 1) * 20, page * 20)
    },
    async getList (page) {
      // 保存的数据过滤名称和素材
      if (this.inputVal) return this.filterList(1)
      this.page.pageCurrent = page || this.page.pageCurrent
      let params = {
        appId: process.env.VUE_APP_APPID,
        type: this.type,
        offset: (this.page.pageCurrent - 1) * 20,
        count: 20
      }
      this.isRepeat = true
      let res = await getSourceList(params)
      if (res.code === 'SUCCESS') {
        let datas = res.items.item || []
        // 图文名称取第一个title
        datas.map(v => {
          if (v.url && v.url.includes('?')) v.url = v.url.split('?')[0]
          if (this.type === 'news') v.name = v.content.newsItem[0].title
        })
        this.tableData = datas
        this.page.pageTotal = res.items.totalCount
        // 存储所有数据
        this.handleStorageData(datas)
      }
      this.isRepeat = false
    },
    handleStorageData (datas) {
      // JSON数组过滤
      if (!this.storageData[this.type]) this.storageData[this.type] = [...datas]
      else {
        datas.forEach(v => {
          if (!JSON.stringify(this.storageData[this.type]).includes(JSON.stringify(v))) this.storageData[this.type].push(v)
        })
      }
    },
    handleCurrentChange (val) {
      // 名称和id过滤取保存的数据
      if (this.inputVal) return this.filterList(val)
      this.page.pageCurrent = val
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.table-container{
  width:100%;
  height:calc(100% - 20px);
  overflow:auto
}
.table-img{
  height:50px
}
</style>
